<template>
  <div>
    <slot :code="code" :message="message" :response="response" :loading="loading" :reload="reload"></slot>
  </div>
</template>

<script>
/* eslint-disable */
import Query from "@/widget/provider/query"

/**
 * 后台请求骨架
 *
 * 做了基础封装，记录了 ajax 请求生命周期的关键参数，根据字段值渲染界面即可
 * 这个组件不会渲染任何内容，需要渲染什么标签，完全取决于插槽的内容。
 */
export default {
    name: "SeaRequest",
    props: {
        // 宽度
        url: {type: String}
        // 高度
        , method: {type: String, default: 'GET'}
        // header
        , headers: {type: Object}
        // 参数，发生变化会触发查询
        , params: {type: Object, default: undefined}
        // 以 Post 方式提交，axios 使用 data 字段提交
        , type: {type: String, default: 'Standard'}
        // 首次自动载入数据，有时候需要等待某些组件完成初始化，这时候需要在组件特定的生命周期中进行调用
        , autoLoad: {type: Boolean, default: true}
        // 响应数据转换，包括一些异常数据的处理
        , resultParser: {type: Function, default: undefined}
    }, data() {
        return {
            // 是否正在载入数据，如果需要制作骨架屏，或者局部加载条，这个属性很好用
            loading: false
            // 业务结果码，绘制错误界面即可，如果 http 请求出错，全局有个错误弹窗，这里不需要处理
            , code: undefined
            // 异常消息
            , message: undefined
            // 响应数据数据
            , response: undefined
        }
    }, watch: {
        params: {
            handler: function () {
                this.reload();
            }
        }
    }, created() {
        if (this.autoLoad) {
            this.reload();
        }
    }, methods: {
        /**
         * 重新载入数据
         */
        reload: function () {
            // 禁止二次加载
            if (this.loading) {
                return;
            }

            this.loading = true;
            // 请求表单内容
            let request = this.params;

            // ajax 配置
            let setting = {
                url: this.url,
                method: this.method,
                headers: this.headers,
                loading: false
            };
            if (this.type === 'Standard') {
                setting.params = request;
            } else {
                // 以RequestBody的方式发送，可以提交一些很复杂的格式，数据会被转为JSON格式后提交
                setting.data = request;
            }

            Query(setting).then((ret) => {
                setTimeout(()=>{
                    this.loading = false;
                    this.code = ret.code;

                    if (ret.code !== 0) {
                        // 异常业务
                        this.message = ret.data;
                        this.response = undefined;
                    } else {
                        // 响应数据
                        this.response = this.resultParser === undefined ? ret.data : this.resultParser(ret.data);
                    }
                }, 300)
            }).catch(err => {
                this.loading = false;
                this.code = 500;
                this.message = '网络或其他异常!';
                this.response = undefined;
                console.error(err);
            })
        }
    }
}
</script>
